<template>
  <a-form-model
    class="basicSettings group-bargaining-form"
    ref="ruleForm"
    :model="formData"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 15 }"
  >
    <a-form-model-item label="页面背景样式" prop="backgroundStyle">
      <a-radio-group v-model="formData.backgroundStyle">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="upload-box" v-show="formData.backgroundStyle === '2'">
        <upload-image
          class="img"
          v-model="formData.backgroundImage"
        ></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br />
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(1)">
            素材库选择
          </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="标题" prop="title">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.title"
        placeholder="输入活动名称，限1-8字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.titleStyle"
      ></style-setting>
    </a-form-model-item>
    <a-form-model-item label="描述" prop="describe">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.describe"
        placeholder="输入活动名称，限1-15字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.describeStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.descBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="盲盒样式" prop="blindBoxStyle">
      <style-setting v-model="formData.blindBoxStyle"></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.blindBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
      <div class="bottom-style">
        <div class="txt">底座样式</div>
        <a-input class="color-slt" type="color" v-model="formData.blindColor" />
      </div>
    </a-form-model-item>
    <a-form-model-item label="盲盒" prop="blindBoxNum">
      <a-radio-group v-model="formData.blindBoxNum" @change="selectBox">
        <a-radio class="r-item" :value="4">4 盒</a-radio>
        <a-radio class="r-item" :value="6">6 盒</a-radio>
        <a-radio class="r-item" :value="9">9 盒</a-radio>
      </a-radio-group>
      <div class="blind-box">
        <div class="box-item" v-for="item in formData.blindBoxNum" :key="item">
          <label>盲盒{{ item }}：</label>
          <a-input
            allow-clear
            style="width: 150px"
            v-model="formData.blindBox[`blindBox${item}`]"
            :maxLength="5"
            placeholder="输入盲盒名称"
          />
          <span>输入1-5字</span>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="盒子效果" prop="boxEffect">
      <a-radio-group v-model="formData.boxEffect">
        <a-radio value="1">系统样式 </a-radio>
        <a-radio value="2">自定义上传 </a-radio>
      </a-radio-group>
      <div class="sys-style" v-show="formData.boxEffect === '1'">
        <div class="txt">盒子图</div>
        <div class="img"></div>
      </div>
      <div class="upload-box" v-show="formData.boxEffect === '2'">
        <upload-image
          class="img"
          v-model="formData.backgroundImage"
        ></upload-image>
        <div class="upload-txt">
          建议尺寸：800像素 * 640像素 <br />
          图片大小不得超过1M
        </div>
        <div class="library-select">
          <a-button key="submit" type="primary" @click="selectFromLibrary(2)">
            素材库选择
          </a-button>
        </div>
      </div>
    </a-form-model-item>
    <a-form-model-item label="告诉好友" prop="tellFriends">
      <a-radio-group v-model="formData.tellFriends">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="进点逛逛" prop="goShopping">
      <a-radio-group v-model="formData.goShopping">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="剩余次数" prop="remainingTimes">
      <a-radio-group v-model="formData.remainingTimes">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
      <style-setting
        class="style-temp"
        v-model="formData.remainingTimesStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.timesBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="奖品池" prop="prizePool">
      <a-radio-group v-model="formData.prizePool">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="名称" prop="prizePoolName">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.prizePoolName"
        :maxLength="5"
        placeholder="输入奖品池名称，限1-5字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.prizePoolStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt w112">底框样式</div>
        <style-setting
          v-model="formData.prizePoolBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
      <div class="bottom-style">
        <div class="txt w112">中奖轮播底座样式</div>
        <style-setting
          v-model="formData.prizeBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="我的奖品" prop="myPrize">
      <a-radio-group v-model="formData.myPrize">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="名称" prop="myPrizeName">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.myPrizeName"
        :maxLength="6"
        placeholder="输入我的奖品名称，限1-6字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.myPrizeStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.myPrizeBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="我的奖品按钮" prop="myPrizeBtn">
      <a-radio-group v-model="formData.myPrizeBtn">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="名称" prop="myPrizeBtnName">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.myPrizeBtnName"
        :maxLength="6"
        placeholder="输入我的奖品名称，限1-6字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.myPrizeBtnStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.myPrizeBtnBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="悬浮获取抽奖机会" prop="lotteryMachine">
      <a-radio-group v-model="formData.lotteryMachine">
        <a-radio value="1">展示 </a-radio>
        <a-radio value="2">不展示 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="名称" prop="lotteryMachineName">
      <a-input
        allow-clear
        style="width: 400px"
        v-model="formData.lotteryMachineName"
        :maxLength="6"
        placeholder="输入我的奖品名称，限1-6字"
      />
      <style-setting
        class="style-temp"
        v-model="formData.lotteryMachineStyle"
      ></style-setting>
      <div class="bottom-style">
        <div class="txt">底框样式</div>
        <style-setting
          v-model="formData.lotteryMachineBottomStyle"
          :isSize="false"
        ></style-setting>
      </div>
    </a-form-model-item>
    <a-form-model-item label="活动规则" prop="activityRules">
      <a-textarea
        v-model="formData.activityRules"
        style="width: 400px"
        placeholder="输入1-60字，不填写则不展示"
        :maxLength="60"
        :rows="4"
      />
    </a-form-model-item>
    <!-------------------------------------------->
    <a-button key="submit" type="primary" @click="handleSubmit">
      测试获取当前form值，见控制台
    </a-button>
  </a-form-model>
</template>

<script>
import styleSetting from "@views/menuPage/marketing/lottery/components/pageSpecialization/styleSetting.vue";

export default {
  name: "basicSettings",
  components: {
    styleSetting,
  },
  data() {
    return {
      formData: {
        backgroundStyle: "1",
        title: "",
        titleStyle: {},
        describe: "",
        describeStyle: {},
        backgroundImage: "",
        descBottomStyle: {},
        blindBoxStyle: {},
        blindBottomStyle: {},
        blindColor: "",
        blindBoxNum: 6,
        blindBox: {
          blindBox1: "",
          blindBox2: "",
          blindBox3: "",
          blindBox4: "",
          blindBox5: "",
          blindBox6: "",
          blindBox7: "",
          blindBox8: "",
          blindBox9: "",
        },
        boxEffect: "1",
        tellFriends: "1",
        goShopping: "1",
        remainingTimes: "1",
        remainingTimesStyle: {},
        timesBottomStyle: {},
        prizePool: "1",
        prizePoolName: "",
        prizePoolStyle: {},
        prizePoolBottomStyle: {},
        prizeBottomStyle: {},
        myPrize: "1",
        myPrizeStyle: {},
        myPrizeBottomStyle: {},
        myPrizeName: "",
        myPrizeBtn: "1",
        myPrizeBtnName: "",
        myPrizeBtnStyle: {},
        myPrizeBtnBottomStyle: {},
        lotteryMachine: "1",
        lotteryMachineName: "",
        lotteryMachineStyle: {},
        lotteryMachineBottomStyle: {},
        activityRules: "",
      },
      blindBox: [],
    };
  },
  methods: {
    handleSubmit() {
      console.log(this.formData);
    },
    selectBox() {
      Object.keys(this.formData.blindBox).forEach((v) => {
        this.formData.blindBox[v] = "";
      });
    },
    selectFromLibrary(type) {
      if (type === 1) {
        this.$message.info("页面背景样式-素材库选择");
      } else {
        this.$message.info("盒子效果-素材库选择");
      }
    },
  },
};
</script>

<style scoped lang="less">
.basicSettings {
  .upload-box {
    display: flex;
    .img {
      margin-right: 12px;
    }
    .library-select {
      display: flex;
      align-items: center;
      padding-left: 20px;
    }
  }
  .bottom-style {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-top: 10px;
    .txt {
      margin-right: 10px;
      &.w112 {
        width: 112px;
      }
    }
  }
  .style-temp {
    margin-top: 10px;
  }
  .color-slt {
    padding: 0;
    width: 80px;
    height: 36px;
    line-height: 36px;
  }
  .blind-box {
    .box-item {
      display: flex;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      label {
        margin-right: 5px;
      }
      span {
        color: #aaaaaa;
        margin-left: 5px;
      }
    }
  }
  .sys-style {
    display: flex;
    .img {
      width: 80px;
      height: 70px;
      background-image: url("");
      background-repeat: no-repeat;
    }
  }
}
</style>
